<template>
  <div style="height: 6vh;background-color: #fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px">信息管理</span>
    <el-button type="primary" style="float: right;margin-top: 10px;" @click="addCinema">新建门店</el-button>
  </div>
  <!-- 门店搜索卡片 -->
  <el-card style="margin: 20px;">
    <el-form style="padding-top:10px;">
      <el-row :gutter="30">
        <el-col :span="5">
          <el-form-item label="门店">
            <el-input placeholder="请输入门店" v-model="searchForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="地址">
            <el-input placeholder="请输入地址" v-model="searchForm.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary"  @click="loadcinema">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
<!--  门店列表卡片-->
  <el-card style="margin: 20px;">
    <el-table :data="cinemaList">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="name" label="影院名称"></el-table-column>
      <el-table-column align="center" prop="address" label="影院地址"></el-table-column>
      <el-table-column align="center" prop="city" label="所在城市"></el-table-column>
      <el-table-column align="center" prop="phone" label="影院电话"></el-table-column>
      <el-table-column align="center" prop="rent" label="影院租金"></el-table-column>
      <el-table-column align="center" prop="money" label="票房"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link @click="updateCinema(scope.row.id)">修改</el-button>
          <el-button type="primary" size="small" link @click="deleteCinema(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter()

//一进页面就加载
onMounted(() =>{
  loadcinema();
})

//定义保存搜索框条件
let searchForm = ref({
  name: '',
  address: ''
})
// 定义变量保存查询出来的的影院数据
let cinemaList = ref([])
// 定义加载影院数据的方法
const loadcinema = () =>{
  let data = qs.stringify(searchForm.value);
  axios.get(BASE_URL+'/v1/cinemas/select/?'+data).then((response)=>{
    if (response.data.code == 2000){
      cinemaList.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//页面跳转
const detail=(id)=>{

}
//页面跳转
const addCinema=()=>{
  router.push('/Information/AddCinema')
}
const resetSearch=()=>{}

// 在 deleteCinema 方法中实现删除功能
const deleteCinema = (id) => {
 if (confirm("确定删除吗？")){
   axios.post(`${BASE_URL}/v1/cinemas/delete/${id}`).then((response) => {
     if (response.data.code === 2000) {
       ElMessage.success('删除成功!')
       loadcinema() // 重新加载数据
     } else {
       ElMessage.error(response.data.msg)
     }
   }).catch(error => {
     console.error('删除失败:', error)
     ElMessage.error('删除失败，请稍后重试!')
   })
 }
}

// 在 updateCinema 方法中实现跳转到编辑页面
const updateCinema = (id) => {
  router.push({
    path: '/Information/AddCinema',
    query: { id: id }
  })
}
</script>

<style scoped>

</style>